<template>
  <div>
    <!-- 顶部 -->
    <header>
      <div>
        <van-nav-bar
          title="旅游度假·西安站"
          left-text=""
          right-text="更多"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      </div>
    </header>
    <!-- 搜索框 -->
    <div class="m-search-wrapper">
      <div>
        <van-icon class-prefix="icon" name="search" />&emsp;
        <input type="text" placeholder="搜索目的地享首单优惠" />
      </div>
    </div>
    <!-- 轮播 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(v, i) in list" :key="i">
          <img :src="v.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="width: 100%; height: 10px; background-color: #f4f4f4"></div>
    <!-- 当季热门目的地 -->
    <div class="big-list">
      <h5 class="title">当季热门目的地</h5>
      <ul class="list">
        <li v-for="(v, i) in listb" :key="i">
          <img :src="v.img" alt="" style="width: 100%; height: 100%" />
          <div>
            {{ v.text }}
            <span style="font-size: 12px; display: inline-block">
              351人喜欢
            </span>
          </div>
        </li>
      </ul>
      <ul class="listb">
        <li v-for="(v, i) in arr" :key="i">{{ arr[i] }}</li>
      </ul>
    </div>
    <div style="width: 100%; height: 10px; background-color: #f4f4f4"></div>
    <!-- 底部推荐 -->
    <div class="tuijian">
      <ul class="tuijian-a">
        <li v-for="(v, i) in listc" :key="i">
          <router-link to="/index"><img :src="v.img" alt="" /></router-link>
        </li>
      </ul>
      <div class="chuyou">
        <router-link to="/">
          <div class="bg">
            <span>
              <van-icon
                class-prefix="icon"
                name="zhoubianyou"
                size="24"
                color="#fff"
              />
            </span>
          </div>
          周边游
        </router-link>
        <router-link to="/">
          <div class="bga bg">
            <span>
              <van-icon
                class-prefix="icon"
                name="zhoubianyou"
                size="24"
                color="#fff"
              />
            </span>
          </div>
          周边游
        </router-link>
        <router-link to="/">
          <div class="bgb bg">
            <span>
              <van-icon
                class-prefix="icon"
                name="zhoubianyou"
                size="24"
                color="#fff"
              />
            </span>
          </div>
          周边游
        </router-link>
        <router-link to="/">
          <div class="bgc bg">
            <span>
              <van-icon
                class-prefix="icon"
                name="zhoubianyou"
                size="24"
                color="#fff"
              />
            </span>
          </div>
          周边游
        </router-link>
        <router-link to="/">
          <div class="bgd bg">
            <span>
              <van-icon
                class-prefix="icon"
                name="zhoubianyou"
                size="24"
                color="#fff"
              />
            </span>
          </div>
          周边游
        </router-link>
        <router-link to="/">
          <div class="bge bg">
            <span>
              <van-icon
                class-prefix="icon"
                name="zhoubianyou"
                size="24"
                color="#fff"
              />
            </span>
          </div>
          周边游
        </router-link>
      </div>
      <div class="lastD">
        <router-link to="/" v-for="(v, i) in listd" :key="i">
          <img :src="v.img" alt="" /><br />
          <span>{{ v.text }}</span>
        </router-link>
      </div>
    </div>
    <div style="position: relative; height: 50px">
      <footer>
        <div>
          <van-icon class-prefix="icon" name="yezishu" color="#34b9d0" /><br />
          度假
        </div>
        <div @click="gotoa">
          <van-icon class-prefix="icon" name="zhinanzhen" /><br />
          好货
        </div>
        <div>
          <van-icon class-prefix="icon" name="temai" /><br />
          特卖
        </div>
        <div @click="gouser">
          <van-icon class-prefix="icon" name="wode" /><br />
          我的
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import { getList, getLast, getRemen, getChuyou } from "@/api/LiXiao/Index";
export default {
  data() {
    return {
      list: [],
      listb: [],
      listc: [],
      listd: [],
      text: "",
      textb: "",
      arr: ["北京", "云南", "新加披", "柬埔寨", "缅甸", "泰国", "天津", "西安"],
    };
  },
  created() {
    this.fun();
    this.funb();
    this.func();
    this.fund();
  },
  methods: {
    gouser(){
      this.$router.push("/userHome")
    },
    gotoa(){
      this.$router.push("/haohuo")
    },
    async fun() {
      let ok = await getList();
      this.list = ok.list;
    },
    async funb() {
      let ok = await getRemen();
      this.listb = ok.list;
      this.text = ok.text;
    },
    async func() {
      let ok = await getLast();
      this.listc = ok.list;
    },
    async fund() {
      let ok = await getChuyou();
      this.listd = ok.list;
      this.textb = ok.text;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/TrainTicket");
    },
  },
};
</script>

<style scoped>
.van-swipe-item > img {
  width: 100%;
  height: auto;
}
.van-icon-arrow-left {
  font-size: 26px;
}
.van-button .van-button--primary .van-button--normal {
  background-color: #fff;
}
.m-search-wrapper {
  text-align: center;
  top: 44px;
  width: 100%;
  z-index: 999;
  padding: 10px 0;
}
.m-search-wrapper > div {
  display: inline-block;
  width: 280px;
  height: 26px;
  border: 1px solid #ccc;
  line-height: 26px;
  border-radius: 13px;
}
.m-search-wrapper > div > input {
  width: 240px;
  height: 24px;
  border: 0;
  font-size: 14px;
}
.title {
  color: #212121;
  font-size: 16px;
  font-weight: 400;
}
.big-list {
  width: 100%;
  height: 370px;
  /* padding: 0 10px; */
  box-sizing: border-box;
}
.list {
  height: 235px;
  width: 90%;
  /* border: 1px solid; */
  /* margin-top: 10px;
  margin-left: 5px; */
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.list > li {
  width: 31%;
  height: 95px;
  /* border: 1px solid red; */
  position: relative;
  margin: 0 auto;
}
.list > li > div {
  width: 70px;
  height: 40px;
  background-color: #fff;
  text-align: center;
  position: absolute;
  top: 70px;
  left: 15px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  font-size: 16px;
}
.listb {
  width: 90%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 20px;
  margin: 0 auto;
}
.listb > li {
  width: 75px;
  height: 30px;
  border: 1px solid #e0e0e0;
  margin: 5px 1px;
  text-align: center;
  line-height: 30px;
}
.tuijian {
  width: 100%;
  /* height: 200px; */
  /* border: 1px solid; */
  /* background-color: #212121; */
}
.tuijian-a {
  display: flex;
  margin: 0 auto;
  justify-content: space-evenly;
}
.tuijian-a > li {
  width: 20%;
  height: 50px;
}

.tuijian-a > li > a > img {
  width: 100%;
  height: 100%;
}
.chuyou {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-evenly;
  margin: 15px 0px 20px;
}
.bg {
  width: 35px;
  height: 35px;
  background-image: url(https://s.qunarzz.com/package_mobile/app/home/tag-bg.png);
  background-repeat: no-repeat;
  background-size: 35px 300px;
  text-align: center;
  line-height: 35px;
  margin-bottom: 3px;
}
.bga {
  background-position-y: -50px;
}
.bgb {
  background-position-y: -100px;
}
.bgc {
  background-position-y: -150px;
}
.bgd {
  background-position-y: -200px;
}
.bge {
  background-position-y: -250px;
}
.lastD {
  width: 100%;
  height: 50px;
  padding-bottom: 50px;
  display: flex;
  justify-content: space-evenly;
}
.lastD > a {
  width: 48px;
  height: 48px;
  display: inline-block;
  text-align: center;
}
.lastD > a > img {
  width: 30px;
  height: 30px;
}
footer {
  width: 100%;
  height: 50px;
  bottom: 0;
  display: flex;
  position: fixed;
  justify-content: space-evenly;
  background-color: #fff;
}
footer > div {
  width: 25%;
  height: auto;
  text-align: center;
  padding-top: 10px;
  cursor: pointer;
}
</style>